<%--
  Created by IntelliJ IDEA.
  User: ZTK
  Date: 2025/6/14
  Time: 14:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>发布二手商品</title>
  <link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap-icons.css">
  <style>
    :root {
      --primary-color: #ff5000;
    }

    body {
      background-color: #f5f5f5;
      padding-top: 56px;
      padding-bottom: 30px;
    }

    .navbar {
      background-color: var(--primary-color);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .navbar-brand {
      font-weight: bold;
      color: white !important;
    }

    .post-container {
      max-width: 800px;
      margin: 30px auto;
      padding: 30px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .post-title {
      text-align: center;
      margin-bottom: 30px;
      color: var(--primary-color);
      font-weight: bold;
    }

    .form-label {
      font-weight: bold;
    }

    .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      width: 100%;
      padding: 12px;
      font-weight: bold;
    }

    .btn-primary:hover {
      background-color: #e04800;
      border-color: #e04800;
    }

    .preview-container {
      border: 1px dashed #ddd;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      margin-bottom: 20px;
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .preview-image {
      max-width: 100%;
      max-height: 300px;
      display: none;
    }

    .upload-icon {
      font-size: 3rem;
      color: #ddd;
    }

    .price-input {
      position: relative;
    }

    .price-input .input-group-text {
      background-color: white;
      border-right: none;
    }

    .price-input .form-control {
      border-left: none;
    }

    .category-select {
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ced4da;
      width: 100%;
    }
  </style>
  <script>
    function previewImage(event) {
      const input = event.target;
      const preview = document.getElementById('preview-image');
      const uploadIcon = document.getElementById('upload-icon');

      if (input.files && input.files[0]) {
        const reader = new FileReader();

        reader.onload = function(e) {
          preview.src = e.target.result;
          preview.style.display = 'block';
          uploadIcon.style.display = 'none';
        }

        reader.readAsDataURL(input.files[0]);
      }
    }

    function validateForm() {
      const price = document.getElementById('price').value;
      if (price <= 0) {
        alert('商品价格必须大于0');
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="${pageContext.request.contextPath}/product/list">二手平台</a>
    <div class="d-flex flex-grow-1 justify-content-center">
      <div class="text-white fw-bold">发布商品</div>
    </div>
    <ul class="navbar-nav">
      <c:choose>
        <c:when test="${not empty sessionScope.currentUser}">
          <li class="nav-item">
            <a class="nav-link" href="${pageContext.request.contextPath}/cart/view">
              <i class="bi bi-cart"></i>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                ${sessionScope.currentUser.username}
            </a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="${pageContext.request.contextPath}/order/list">我的订单</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/logout">退出登录</a></li>
            </ul>
          </li>
        </c:when>
        <c:otherwise>
          <li class="nav-item">
            <a class="nav-link" href="${pageContext.request.contextPath}/user/login">登录</a>
          </li>
        </c:otherwise>
      </c:choose>
    </ul>
  </div>
</nav>

<div class="container">
  <div class="post-container">
    <h2 class="post-title">发布二手商品</h2>
    <form action="${pageContext.request.contextPath}/product/post" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
      <!-- 图片上传 -->
      <div class="mb-4">
        <label class="form-label">商品图片</label>
        <div class="preview-container">
          <i class="bi bi-cloud-arrow-up upload-icon" id="upload-icon"></i>
          <img src="" class="preview-image" id="preview-image" alt="预览图">
        </div>
        <input type="file" class="form-control" name="imageFile" accept="image/*" onchange="previewImage(event)" required>
        <div class="form-text">支持JPG、PNG格式，大小不超过10MB</div>
      </div>

      <!-- 商品名称 -->
      <div class="mb-3">
        <label for="name" class="form-label">商品名称</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="请输入商品名称" required>
      </div>

      <!-- 商品描述 -->
      <div class="mb-3">
        <label for="description" class="form-label">商品描述</label>
        <textarea class="form-control" id="description" name="description" rows="4" placeholder="请输入商品详细信息，如新旧程度、使用情况等" required></textarea>
      </div>

      <div class="row">
        <!-- 商品价格 -->
        <div class="col-md-6 mb-3">
          <label for="price" class="form-label">价格</label>
          <div class="input-group price-input">
            <span class="input-group-text">¥</span>
            <input type="number" class="form-control" id="price" name="price" min="0.01" step="0.01" placeholder="0.00" required>
          </div>
        </div>

        <!-- 商品类别 -->
        <div class="col-md-6 mb-3">
          <label class="form-label">商品类别</label>
          <select class="category-select" name="category" required>
            <option value="" disabled selected>选择商品类别</option>
            <option value="手机">手机</option>
            <option value="电脑">电脑</option>
            <option value="数码">数码</option>
            <option value="家电">家电</option>
            <option value="服装">服装</option>
            <option value="图书">图书</option>
            <option value="家具">家具</option>
            <option value="运动">运动</option>
            <option value="母婴">母婴</option>
            <option value="其他">其他</option>
          </select>
        </div>
      </div>

      <!-- 提交按钮 -->
      <button type="submit" class="btn btn-primary mt-4">立即发布</button>
    </form>
  </div>
</div>

<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
</body>
</html>
